<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>搜索复制报告</span>
      </div>
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        class="ele-form-search"
        label-width="75px"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <div class="app-container">
          <div class="filter-container">
            <el-select
              v-model="where.bazaarId"
              clearable
              placeholder="推广市场"
              style="width: 160px; margin-right: 6px"
              @change="changebazaarId"
            >
              <template v-for="item in bazaarList">
                <el-option
                  v-if="item.status === 1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </template>
            </el-select>

            <el-select
              v-model="where.customerid"
              class="filter-item"
              clearable
              placeholder="归属客户"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.contact"
              class="filter-item"
              clearable
              placeholder="负责人"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in principalList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.username"
              clearable
              placeholder="推广账户"
              style="width: 160px; margin-right: 6px"
              @change="reload"
            >
              <template v-for="item in expandList">
                <el-option
                  v-if="item.status === 1"
                  :key="item.userid"
                  :label="item.username"
                  :value="item.userid"
                />
              </template>
            </el-select>

            <el-select
              v-model="where.ocpcType"
              class="filter-item"
              clearable
              placeholder="回传方式"
              style="width: 120px"
              @change="reload"
            >
              <el-option
                v-for="item in ocpcTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="where.ocpcStatus"
              class="filter-item"
              clearable
              placeholder="回传状态"
              style="width: 120px"
              @change="reload"
              @clear="reload"
            >
              <el-option
                v-for="item in ocpcStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-date-picker
              v-model="daterange"
              :clearable="false"
              :picker-options="pickerOptions"
              end-placeholder="数据结束日期"
              range-separator="-"
              start-placeholder="数据开始日期"
              style="width: 226px; margin-right: 6px"
              type="datetimerange"
              unlink-panels
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="onDateRangeChoose"
            />

            <el-button
              icon="el-icon-search"
              style="margin-right: 6px"
              type="primary"
              @click="reload"
              >搜索
            </el-button>

            <el-button
              icon="el-icon-refresh"
              style="margin-left: 2px"
              @click="reset"
              >重置
            </el-button>
          </div>
        </div>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="url"
        :max-height="defaultHeight"
        :parse-data="parseData"
        :selection.sync="selection"
        :where="where"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            v-if="$hasPermission('semdata:ocpctype')"
            :disabled="selection.length === 0"
            icon="el-icon-eleme"
            size="small"
            type="primary"
            @click="setOcpcType()"
            >设置回传方式
          </el-button>
          <el-button
            v-if="$hasPermission('semdata:ocpc')"
            :disabled="selection.length === 0"
            icon="el-icon-set-up"
            size="small"
            type="success"
            @click="ocpcBatch()"
            >批量OCPC回传
          </el-button>
        </template>

        <!-- 推广市场列 -->
        <template slot="bazaarId" slot-scope="{ row }">
          <template v-for="item in bazaarList">
            <span v-if="row.bazaarId === item.id" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- IP地址列 -->
        <template slot="ipAddr" slot-scope="{ row }">
          <span>{{ row.addr }}</span>
        </template>

        <!-- 回传方式列 -->
        <template slot="ocpcType" slot-scope="{ row }">
          <el-tag :type="['', 'success', ''][row.ocpcType]" size="mini"
            >{{ ["", "自动回传", "手动回传"][row.ocpcType] }}
          </el-tag>
        </template>

        <!-- 回传状态列 -->
        <template slot="ocpcStatus" slot-scope="{ row }">
          <template v-if="row.ocpcStatus === 1">
            <template v-if="row.ocpcType === 1">
              <el-popover
                :content="
                  [
                    '',
                    '系统还在判断数据的真实',
                    '等待回传, 人工还未确认数据的真实。',
                  ][row.ocpcType]
                "
                placement="top-start"
                title="等待回传"
                trigger="click"
                width="200"
              >
                <el-button
                  slot="reference"
                  style="
                    padding: 4px 6px;
                    font-size: 12px;
                    color: #409eff;
                    border: 1px solid #d9ecff;
                  "
                  >等待回传
                </el-button>
              </el-popover>
            </template>
            <template v-else>
              <el-popconfirm
                title="你确定要进行回传吗? "
                @confirm="setocpc(row)"
              >
                <el-button
                  slot="reference"
                  style="padding: 4px 6px; font-size: 12px"
                  type="primary"
                  >确认回传
                </el-button>
              </el-popconfirm>
            </template>
          </template>

          <template v-if="row.ocpcStatus === 2">
            <el-popover
              content="URL无bd_vid特征 / 停留时间 < 8 s。"
              placement="top-start"
              title="拒绝回传"
              trigger="click"
              width="200"
            >
              <el-button
                slot="reference"
                style="
                  padding: 4px 6px;
                  font-size: 12px;
                  border-color: #fde2e2;
                  color: #f56c6c;
                "
                >回传失败
              </el-button>
            </el-popover>
          </template>

          <template v-if="row.ocpcStatus === 3">
            <el-popover
              content="规定时间内未回传,导致回传已失效。"
              placement="top-start"
              title="回传超时"
              trigger="click"
              width="200"
            >
              <el-button
                slot="reference"
                style="
                  padding: 4px 6px;
                  font-size: 12px;
                  border-color: #faecd8;
                  color: #e6a23c;
                "
                >回传超时
              </el-button>
            </el-popover>
          </template>

          <template v-if="row.ocpcStatus === 4">
            <el-popover
              content="其他时段已回传给百度模型。"
              placement="top-start"
              title="重复数据"
              trigger="click"
              width="200"
            >
              <el-button
                slot="reference"
                style="
                  padding: 4px 6px;
                  font-size: 12px;
                  border-color: #e1f3d8;
                  color: #67c23a;
                "
                >重复数据
              </el-button>
            </el-popover>
          </template>

          <template v-if="row.ocpcStatus === 5">
            <el-popover
              content="代表已回传给百度模型。"
              placement="top-start"
              title="回传成功"
              trigger="click"
              width="200"
            >
              <el-button
                slot="reference"
                style="
                  padding: 4px 6px;
                  font-size: 12px;
                  border-color: #e1f3d8;
                  color: #67c23a;
                "
                >回传成功
              </el-button>
            </el-popover>
          </template>
        </template>

        <!-- 停留时长列 -->
        <template slot="staySecond" slot-scope="{ row }">
          {{ formatSeconds(row.staySecond) }}
        </template>

        <!-- 复制时长列 -->
        <template slot="copySeconds" slot-scope="{ row }">
          {{ formatSeconds(row.copySeconds) }}
        </template>

        <!-- 落地页列 -->
        <template slot="url" slot-scope="{ row }">
          <el-link :href="row.url" target="_blank" type="primary">{{
            row.url
          }}</el-link>
        </template>

        <!-- 回传编码列 -->
        <template slot="ocpcCode" slot-scope="{ row }">
          <el-tag
            v-if="row.ocpcCode === 35"
            effect="dark"
            size="mini"
            type="success"
            >[35]微信复制</el-tag
          >
          <el-tag
            v-if="row.ocpcCode === 1"
            effect="light"
            size="mini"
            type="success"
            >[1]咨询按钮</el-tag
          >
          <el-tag
            v-if="row.ocpcCode === 3"
            effect="plain"
            size="mini"
            type="success"
            >[3]表单提交</el-tag
          >
        </template>
      </ele-pro-table>
    </el-card>

    <!-- OCPC设置弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="'设置OCPC回传方式'"
      :visible.sync="ocpcShow"
      custom-class="ele-dialog-form"
      width="500px"
      @closed="ocpcForm = {}"
    >
      <el-form
        ref="ocpcForm"
        :model="ocpcForm"
        :rules="ocpcRules"
        label-width="86px"
      >
        <el-form-item label="回传方式:" prop="ocpcType">
          <el-select
            v-model="ocpcForm.ocpcType"
            :disabled="ocpcLoading"
            class="ele-block"
            placeholder="请选择回传方式"
          >
            <template v-for="item in ocpcTypeList">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="ocpcShow = false">取消</el-button>
        <el-button
          :loading="ocpcLoading"
          icon="el-icon-cloudy"
          type="primary"
          @click="ocpcSave"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { messageLoading } from "@/panel";

export default {
  name: "semData",
  data() {
    return {
      //归属客户
      customerList: [],
      //负责人
      principalList: [],
      // ocpc设置
      ocpcForm: {},
      // ocpc设置
      ocpcShow: false,
      // ocpc设置
      ocpcLoading: false,
      // ocpc设计中
      ocpcRules: {
        ocpcType: [
          { required: true, message: "请选择同步账户", trigger: "blur" },
        ],
      },
      // 当前地域数据
      regionTarget: null,
      // 是否显示地域弹窗
      showRegionTarget: false,
      // 账户列表
      expandList: [],
      // 账户列表
      tempexpandList: [],
      //市场列表
      bazaarList: [],
      // 回传方式
      ocpcTypeList: [
        { value: 1, label: "自动回传" },
        { value: 2, label: "手动回传" },
      ],
      // 回传状态
      ocpcStatusList: [
        { value: 1, label: "等待回传" },
        { value: 2, label: "回传失败" },
        { value: 3, label: "回传超时" },
        { value: 4, label: "重复数据" },
        { value: 5, label: "回传成功" },
      ],
      // 表格高度
      defaultHeight: 0,
      // 筛选日期范围
      daterange: this.getDaterange(),
      // 日期时间选择器快捷项
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime());
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 7 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 15 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 30 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 90 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 180 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 365 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 表格数据接口
      url: "/semData/method",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
        },
        {
          prop: "username",
          label: "推广账户",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "bazaarId",
          label: "推广市场",
          slot: "bazaarId",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "domain",
          label: "访问域名",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "word",
          label: "搜索词",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "keywordId",
          label: "关键词ID",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "url",
          slot: "url",
          label: "落地页",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          show: false,
          prop: "content",
          label: "复制内容",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "wechat",
          label: "复制微信",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "wechatNickname",
          label: "客服昵称",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "wechatName",
          label: "使用员工",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "level",
          label: "复制位置",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "staySecond",
          label: "浏览时长",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "staySecond",
        },
        {
          prop: "copySeconds",
          slot: "copySeconds",
          label: "复制时长",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "ip",
          label: "访问IP",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "ipAddr",
          slot: "ipAddr",
          label: "IP地域",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          width: 80,
          prop: "dpi",
          label: "分辨率",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "device",
          label: "设备",
          sortable: "custom",
          resizable: false,
        },
        {
          prop: "browser",
          label: "浏览器",
          sortable: "custom",
          resizable: false,
        },
        {
          width: 140,
          prop: "copyTime",
          label: "复制时间",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "ocpcType",
          label: "回传方式",
          sortable: "custom",
          resizable: false,
          slot: "ocpcType",
        },
        {
          width: 102,
          prop: "ocpcCode",
          label: "回传编码",
          sortable: "custom",
          resizable: false,
          slot: "ocpcCode",
        },
        {
          prop: "ocpcStatus",
          label: "回传状态",
          sortable: "custom",
          resizable: false,
          slot: "ocpcStatus",
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },

  methods: {
    /*设置OCPC*/
    ocpcSave() {
      this.$refs["ocpcForm"].validate((valid) => {
        if (valid) {
          this.ocpcLoading = true;
          const ids = this.selection.map((d) => d.id);
          this.$http
            .put("/semData/ocpcType", {
              type: this.ocpcForm.ocpcType,
              id: ids.join(","),
            })
            .then((res) => {
              this.ocpcLoading = false;
              if (res.data.code === 0) {
                this.ocpcShow = false;
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.ocpcLoading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    /*市场被改变*/
    changebazaarId(id) {
      let arrayList = [];
      this.where.username = "";
      for (let i = 0; i < this.tempexpandList.length; i++) {
        if (this.tempexpandList[i].bazaarId === id) {
          arrayList.push(this.tempexpandList[i]);
        }
      }
      this.expandList = arrayList;
      this.reload();
    },

    /*设置OCPC回传方式*/
    setOcpcType() {
      if (!this.$hasPermission("semdata:ocpctype")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.ocpcLoading = false;
      this.ocpcShow = true;
    },
    /**/
    ocpcBatch() {
      if (!this.$hasPermission("semdata:ocpc")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要回传选中的数据吗?", "提示", {
        confirmButtonText: "回传",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.selection.map((d) => d.id);
          const loading = this.$loading({ lock: true });
          this.$http
            .put("/semData/ocpcBatch", {
              id: ids.join(","),
            })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
    /*开始OCPC回传*/
    setocpc(row) {
      if (!this.$hasPermission("semdata:ocpc")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      const loading = messageLoading("正在回传OCPC请稍后..");
      this.$http
        .put("/semData/ocpc/id/" + row.id)
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            row.ocpcStatus = res.data.ocpcStatus;
            this.$message({ type: "success", message: res.data.msg });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /*默认时间*/
    getDaterange() {
      let start = new Date();
      start.setTime(start.getTime());
      start =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate() +
        " 00:00:00";
      let end = new Date();
      end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
      end =
        end.getFullYear() +
        "-" +
        (end.getMonth() + 1) +
        "-" +
        end.getDate() +
        " 00:00:00";
      return [start, end];
    },

    /* 日期选择改变回调 */
    onDateRangeChoose() {
      if (this.daterange && this.daterange.length === 2) {
        this.where.createTimeStart = this.daterange[0];
        this.where.createTimeEnd = this.daterange[1];
      } else {
        this.where.createTimeStart = null;
        this.where.createTimeEnd = null;
      }
    },

    /*设置表格高度*/
    getHeight() {
      this.defaultHeight = window.innerHeight - 360;
    },

    /*表格数据加载*/
    parseData(res) {
      if (res.code === 0) {
        this.tempexpandList = res.expand;
        this.customerList = res.customer;
        this.principalList = res.principal;
        this.bazaarList = res.bazaar;
      }
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg,
      };
    },

    /* 刷新表格 */
    reload(isPage) {
      let obj = { where: this.where };
      if (!isPage) {
        obj.page = 1;
      }
      this.$refs.table.reload(obj);
    },

    /* 重置搜索 */
    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      let daterange = this.getDaterange();
      if (daterange.length === 2) {
        this.where.createTimeStart = daterange[0];
        this.where.createTimeEnd = daterange[1];
      }
      this.daterange = daterange;
      this.reload();
    },

    /*转分秒格式化*/
    formatSeconds(value) {
      const time = parseInt(value, 0);
      if (time <= 60) {
        return time + "秒";
      }
      let result = "";
      let minute = 0; // 分
      if (time > 60) {
        minute = parseInt(time / 60, 0);
        result += minute + "分";
      }
      let seconds = time - minute * 60;
      if (seconds > 0) {
        result += seconds + "秒";
      }
      return result;
    },
  },
};
</script>

<style scoped></style>
